<template>
  <MainContent title="门票记录" back>
    <SearchBar inline>
      <template #normal>
        <!-- <el-form-item label="ID">
          <el-input v-model="tableForm.name" clearable placeholder="请输入ID"></el-input>
        </el-form-item> -->
      </template>
      <template #toolbar>
        <el-form-item>
          <el-button type="primary" icon="plus" @click="showDialog = true"
            >发放门票</el-button
          >
        </el-form-item>
      </template>
    </SearchBar>

    <LayoutTable ref="tableRef" url="/activity/ticketDistributePager" :param="tableForm">

      <el-table-column prop="ticketNum" label="门票数量" min-width="80" />
      
      <el-table-column prop="type" label="类型" min-width="100">
        <template #default="scope">
          <div>
            {{ `${scope.row.type == 1 ? '指定人群' : '规则引擎'}` }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="pageFlagNames" label="区域" min-width="100">
        <template #default="scope">
          <div>
            {{ String(scope.row.pageFlagNames) }}
          </div>
        </template>
      </el-table-column>

      

      <el-table-column prop="startTime" label="开始时间" min-width="100">
        <template #default="scope">
          <div>
            {{ dateFormat(scope.row.startTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间" min-width="100">
        <template #default="scope">
          <div>
            {{ dateFormat(scope.row.endTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="100">
        <template #default="scope">
          <div>
            {{ dateFormat(scope.row.createTime) }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="150">
        <template #default="scope">
          <div>
            <!-- <el-button
              style="margin-right: 10px"
              type="text"
              @click="toEditor(scope.row)"
              v-has="['120203']"
            >
              编辑
            </el-button> -->

            <el-button @click="toDetail(scope.row)" type="primary" link
              >详情</el-button
            >
          </div>
        </template>
      </el-table-column>
    </LayoutTable>
  </MainContent>
  <AddTicket
    :show-dialog="showDialog"
    :pageAreaTypes="pageAreaTypes"
    @confirm="confirm"
    @cancel="cancel"
  ></AddTicket>
</template>

<script lang="ts" setup>
import AddTicket from "./components/addTicket.vue";
import { dateFormat } from "@/utils/filters";
import { getActivityByIdApi } from "@/api/activity";
const Route = useRoute(),
  Router = useRouter(),
  Store = useStore();
const showDialog = ref(false);
const tableRef = ref()
const pageAreaTypes = ref([] as any);
const tableForm = ref({
  actId: Route.params.id,
});

const toDetail = (row: any) => {
  Router.push(`/activity/activityTicketDetail/${row.id}`)
}

const confirm = () => {
  tableRef.value.search()
  cancel();
};
const cancel = () => {
  showDialog.value = false;
};
const getActivityDetail = async () => {
  const rs = await getActivityByIdApi({ id: Route.params.id });
  if (rs.code === 200) {
    pageAreaTypes.value = rs.payload.pageAreas;
  }
};
onBeforeMount(() => {
  getActivityDetail();
});
</script>

<style lang="scss" scoped></style>
